<template>
	<view class="page">
		<template v-if="isLogin" >
			<view class="body"> 

				<view class="lay-btn-wrap"> 
					<view class="lay-btn-item">
						<view class="content">
							<view class="label-name">手机号</view>
							<view class="val">
								<view class="con-text split f-grey">{{replace_phone}}</view> 
							</view> 
							<view class="right-icon"></view>
						</view>
					</view>
					<view  class="lay-btn-item">
						<view class="content">
							<view class="label-name">姓 名</view>
							<view class="val"> 
								<view class="con-text split">{{userInfo.realname}}</view>
								<view class="link-text f-blue" @click="showPopup('show','isChangeName')">修改姓名</view>
							</view> 
							<view class="right-icon">
								<view class="iconfont icon-corrow f-s68">&#xeb8a;</view>
							</view>
						</view>
					</view>
					<!-- <view class="lay-btn-item">
						<view class="content">
							<view class="label-name">密 码</view>
							<view class="val">
								<view class="con-text split"></view>
								<view class="link-text f-blue" @click="changeInfo('password')">重置密码</view>
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow f-s68">&#xeb8a;</view>
							</view>
						</view>
					</view> -->
					<navigator  open-type="navigate" url="/package_member/area/area" hover-class="none" class="lay-btn-item" >
						<view class="content">
							<view class="label-name">地区信息</view>
							<view class="val">
								<view class="con-text split"></view> 
								<view class="link-text f-blue">设置</view>
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow f-s68">&#xeb8a;</view>
							</view>
						</view>
					</navigator>
					
					
				</view>
				
				<view class="lay-btn-wrap"> 
					<view class="lay-btn-item" @click="noticeOpen">
						<view class="content">
							<view class="label-name">开启通知</view> 
							<view class="val"> <!-- 占位 -->	</view> 
							<switch class="switch-btn" color="#ff0000" :checked="permission.notice" style="transform:scale(0.7)" disabled></switch> 
						</view>
					</view> 
				</view>
				
				<view class="lay-btn-wrap">
					<navigator v-if="userInfo.wx_info" open-type="navigate" url="/pages/bindPhone/bindPhone?type=upbind" hover-class="none" class="lay-btn-item">
						<view class="content">
							<view class="label-name">绑定微信</view>
							<view class="val">
								<view class="wx-icon"><image :src="wx_info.avatarUrl" mode="widthFix"></image></view>
								<view class="link-text f-blue">解除绑定</view>
							</view> 
							<view class="right-icon">
								<view class="iconfont icon-corrow f-s68">&#xeb8a;</view>
							</view>
						</view>
					</navigator>
					<navigator v-else open-type="navigate" url="/pages/bindPhone/bindPhone?type=bind" hover-class="none" class="lay-btn-item">
						<view class="content">
							<view class="label-name">绑定微信</view>
							<view class="val">
								<view class="con-text split"></view>
								<view class="link-text f-blue">未绑定</view>
							</view> 
							<view class="right-icon">
								<view class="iconfont icon-corrow f-s68">&#xeb8a;</view>
							</view>
						</view>
					</navigator>
				</view>
				
				<view class="lay-btn-wrap">
					<view class="lay-btn-item" @click="delectAccount">
						<view class="content">
							<view class="label-name">注销账户</view>
							<view class="val">
								<view class="con-text split"></view> 
								<view class="link-text f-grey">注销后将不能使用相关功能</view>
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow f-s68">&#xeb8a;</view>
							</view>
						</view>
					</view>
				</view>
 

				<view class="btn m-b2" @click="logout">退出登录</view> 

			</view>
		</template>
		
		
		
		<view v-if="flag.isFullPage" class="full-fix-page">

			<template>
				<!-- 验证手机 -->
				<view v-if="flag.isCheckPhone" class="popup-wrap a-fadein">
					<view class="popup-type-model ">
						<view class="close-btn iconfont icon-guanbi f-s34" @click="closeSendCode"></view>
						<view class="popup-body">
							<view class="title">验证手机</view>
							<view class="content get-code-popup">
								<view class="phone-text">手机号：{{replace_phone}}</view>
								<view class="code-bar">
									<input type="number" v-model="phone_code" placeholder="输入验证码">
									<view class="get-code-btn" @click="getCode">{{count_time_text}}</view>
								</view>
								<view class="code-comfirm-btn" @click="comfirmCode">确定</view> 
							</view>
						</view>
					</view>
				</view> 
				
				<!-- 修改密码 -->
				<view v-if="flag.isRestPassword" class="popup-wrap a-fadein">
					<view class="popup-type-model ">
						<view class="close-btn iconfont icon-guanbi f-s34" @click="closeSendCode"></view>
						<view class="popup-body">
							<view class="title">重置密码</view>
							<view class="content get-code-popup">
								<view class="code-bar">
									<input type="password" v-model="password" placeholder="输入新密码">
								</view>  
								<view class="code-bar">
									<input type="password" v-model="reset_password" placeholder="确认新密码">
								</view> 
								<view class="code-comfirm-btn" @click="resetPassword">确定</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 修改名称 -->
				<view v-if="flag.isChangeName" class="popup-wrap a-fadein">
					<view class="popup-type-model ">
						<view class="close-btn iconfont f-s34" @click="showPopup('hide')">&#xe624;</view>
						<view class="popup-body">
							<view class="title">修改名称</view>
							<view class="content get-code-popup">
								<view class="code-bar">
									<input type="text" v-model="name" placeholder="输入新名称">
								</view>   
								<view class="code-comfirm-btn" @click="updateName">确定</view>
							</view>
						</view>
					</view>
				</view>

			</template>


		</view>
	</view>
</template>

<script>
	import {
		replaceStr,
		checkPhone
	} from '@/common/util.js' 
	 
	import Timer from '@/common/timer.js'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false, 
				userInfo: {},
				phone: '',
				phone_code: '',
				loginStateUpdate: false,
				new_phone: '',
				replace_phone:'',
				wx_info:{},
				name:'',
				isStop:true,
				flag: { // 弹窗相关
					isFullPage: false,
					isCheckPhone: false,
					isBindPhone: false,
					isRestPassword:false,
					isChangeName:false
				},
				password:'',
				reset_password:'',
				updateType:'phone',
				count_time_text: '获取验证码',
				timer: null,
				isSentCode: true,
				bindPhoneStep_2: false,
				isComfirmLogin: true,
				permission:{
					notice:false
				}
			}
		},
		async onShow() { 
			this.permission.notice=getApp().globalData.isNoticeOpen;
			
			this.isLogin=await this.$loginState('check');
			
			if(this.isLogin){
				this.userInfo=await this.getUserInfo();
				if(this.userInfo.wx_info){
					this.wx_info=JSON.parse(this.userInfo.wx_info);  
				}				 
				this.replace_phone = replaceStr(this.userInfo.phone, 3, '****');				
				
			}		
			
		},
		async onLoad() {
			
				
		},
		methods: {
			
			// 退出登录 			
			logout:async function(){
				let _this=this;
				uni.showModal({
					content:"确定退出登录吗？",
					async success(res) {
						if(res.confirm){ 
							let logout_res=await _this.$api.user_api.logout();  
							if(logout_res.data.ret==0){
								uni.reLaunch({
									url:"/pages/login/login"
								})
								uni.removeStorageSync('cookiekey');
								uni.removeStorageSync('userInfo'); 
							}
							
						}
					}
				})
				 
			},
			
			// 拨打电话
			tellphone: function() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone
				});
			},

			checkPhoneCodeInit: function() { 
				this.phone_code = ''; 
				if (this.timer) {
					this.timer.stop();
					this.count_time_text = '获取验证码';
				}
			},

			changeInfo: function(type) {
				this.updateType=type;
				this.showPopup('show', 'isCheckPhone');
			},
 
			
			// 重置密码
			resetPassword:async function(){
				let _this = this;
				if (this.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入新密码',
						mask: true,
						duration: 2000
					}) 
				}else if(this.reset_password==''){
					uni.showToast({
						icon: 'none',
						title: '请再次输入新密码',
						mask: true,
						duration: 2000
					}) 
				}else if(this.password != this.reset_password){
					uni.showToast({
						icon: 'none',
						title: '两次输入密码不一致',
						mask: true,
						duration: 2000
					}) 
				}else{
					if (this.isComfirmLogin) {
						this.isComfirmLogin = false;						 
						let isUpdateSuccess = await this.updatePwd();
						if (isUpdateSuccess) {
							_this.showPopup('hide');
							setTimeout(() => {
								uni.removeStorageSync('userInfo');
								uni.removeStorageSync('cookieKey');
								uni.removeStorageSync('password');
								uni.reLaunch({
									url:'/pages/login/login'
								}) 
							}, 1000)
						} else {
							setTimeout(() => {
								_this.isComfirmLogin = true; 
							}, 1000)
						}
					
					}
				}
			},

			updatePwd: async function() {
				let _this = this; 

				let res = await this.$api.user_api.updatePwd({
					password:this.password,
					password2:this.reset_password
				})
				if (res.data.ret == 0) {		 
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						mask: true,
						duration: 1000,
						success() {
					
						}
					}) 
					return true;
				} else {
					uni.showToast({
						icon: 'none',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
						success() {

						}
					})
					return false;
				}
			},

			getCode: async function() { 
				let _this = this; 
				if (this.isSentCode) {
					this.isSentCode = false;
					uni.showLoading({
						mask:true,
						title:'验证码发送中...'
					})
					let res = await this.$api.user_api.sendsms({
						tel:this.userInfo.phone,
						type:2      // 1 找回密码  2 重置密码  空/0 登录
					})
					if (res.data.ret == 0) {
						uni.hideLoading();
						uni.showToast({
							icon: 'success', 
							title: '验证码发送成功',
							mask: true,
							duration: 1000,
							success() {
								setTimeout(() => {
									_this.isSentCode = true;
								}, 300)
							}
						})
						this.timer = new Timer({
							type: '1',
							num: 60
						});
						this.timer.start({
							success: function(res) {
								_this.count_time_text = res + 's';
								_this.isSentCode = true;
							},
							complate: function() {
								_this.count_time_text = '获取验证码';
								_this.isSentCode = true;
							}
						})
					} else {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							image: '../../static/images/error.png',
							title: res.data.message,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(() => {
									_this.isSentCode = true;
								}, 300)
							}
						})
					}

				}
			},
			
			// 修改名称
			updateName:async function(){
				let _this=this;
				if(this.name==''){
					uni.showToast({
						icon: 'none',
						title: '请输入新名称',
						mask: true,
						duration: 2000,
					})
				}else{
					if(this.isStop){
						this.isStop=false;
						let res=await this.$api.user_api.updateName({
							realname:this.name,
							uid:this.userInfo.id
						}) 
						if(res.data.ret==0){ 
							this.userInfo=await this.getUserInfo();
							uni.setStorage({
								key:'userInfo',
								data:this.userInfo
							})
							uni.showToast({
								icon: 'success',
								title: '名称修改成功',
								mask: true,
								duration: 2000,
								success() {
									setTimeout(()=>{
										_this.isStop=true;
										_this.showPopup('hide');
									},2000)
								}
							})
						}else{
							uni.showToast({
								icon: 'none',
								image:'../../static/images/error.png',
								title: res.data.message,
								mask: true,
								duration: 2000,
								success() {
									setTimeout(()=>{
										_this.isStop=true; 
									},2000)
								}
							})
						}
					}					
				}
				
			},
			
			// 检测验证码
			checkPhoneCode: async function() {
				let _this=this;
				let res = await this.$api.user_api.checksms({
					code: this.phone_code,
					type:2
				}) 
				if (res.data.ret == 0) {
					return true
				} else {
					uni.showToast({
						icon: 'none',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
					})
					setTimeout(() => {
						_this.checkPhoneCodeInit();
					}, 300)
					return false
				}
			},

			// 验证验证码
			comfirmCode: async function() { 
				let _this = this;
				if (this.phone_code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入短信验证码',
						mask: true,
						duration: 2000,
					})
				} else {
					if (this.isComfirmLogin) {
						this.isComfirmLogin = false;
						let checkPhoneCode = await this.checkPhoneCode();

						if (checkPhoneCode) {

							// 验证成功 进入下一步
							uni.showToast({
								icon: 'success',
								title: '验证成功',
								mask: true,
								duration: 1000,
								success() {
									setTimeout(() => {
										_this.showPopup('hide');
										_this.showPopup('show', 'isRestPassword');										
										_this.isComfirmLogin = true;
										_this.checkPhoneCodeInit();
									}, 1000)
								}
							})

						} else {
							_this.phone_code = '';
							setTimeout(() => {
								_this.isComfirmLogin = true;
							}, 1000)
						}
					}

				}

			},

			closeSendCode: function() {
				this.checkPhoneCodeInit();
				if (this.timer) {
					this.timer.stop();
				}
				this.showPopup('hide');
			},

			showPopup: function(t, n) {
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
			 
		
			// 获取用户信息 
			getUserInfo:async function(){
				let res=await this.$api.user_api.getUserInfo(); 
				if(res.data.ret==0){
					return res.data.data;
				}
			},
			
			// 开启消息通知
			noticeOpen:function(){ 
				if(plus.os.name=="Android"){
					var main = plus.android.runtimeMainActivity();
					var pkName = main.getPackageName();  	
					var Intent = plus.android.importClass('android.content.Intent');
					var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');//可设置表中所有Action字段  
					intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);  
					main.startActivity(intent);  
				}
				
				if(plus.os.name=="iOS"){
					var UIApplication = plus.ios.import("UIApplication"); 					
					var NSURL2 = plus.ios.import("NSURL");
					var setting2 = NSURL2.URLWithString("app-settings:");  
					var application2 = UIApplication.sharedApplication();  
					application2.openURL(setting2);  
					plus.ios.deleteObject(setting2);  
					plus.ios.deleteObject(NSURL2);  
					plus.ios.deleteObject(application2);  
				}
				
			},
			
			// 注销账号
			delectAccount:function(){
				let _this=this;
				uni.showModal({
					content:'注销账号后将不能找回，包括账号关联数据，确定注销账号吗？',
					confirmText:'确定',
					async success(res) {
						if(res.confirm){
							let del_res=await _this.$api.user_api.cancleAccount(); 
							if(del_res.data.ret==0){
								uni.showToast({
									icon:'success',
									title:'账号注销成功',
									mask:true,
									duration:1000,
									success() {
										uni.clearStorage();
										uni.redirectTo({
											url:'/pages/login/login'
										})
									}
								})
							}
						}
					}
				})
			}
		
		},
		computed: {

		},
		 
		components: {

		},
		onUnload() {
			if (this.timer) {
				this.timer.stop();
			}
		},
	}
</script>

<style lang="less" scoped> 

	.lay-btn-wrap {
		margin-top: 20rpx; 
		background: #fff;
		border-bottom: 2rpx solid #eee;
	}

	.lay-btn-item {
		display: flex;
		align-items: center;
		justify-content: space-between; 
		.icon-label {
			display: flex;
			align-items: center;
			width: 60rpx;
			text-align: center;
			color: #09f;

			image {
				width: 38rpx;
			}
		}

		.content {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			flex-grow: 2;
			max-width: 99%;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #eee;

			.label-name {
				width: 200rpx;
				display: flex;
				font-size: 32rpx;
				color: #000;

				image {
					width: 100rpx;
				}
			}

			.val {
				display: flex;
				justify-content: space-between;
				flex-grow: 2;
				width: 90%;
				margin-right: 8rpx;
				font-size: 32rpx;
				color: #666; 
				.con-text {
					flex-grow: 2;
					max-width: 50%;
				}
				.wx-icon{
					width: 50rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.link-text {
					color: #666;
				}
			}

			.right-icon {
				width: 50rpx;
				margin-right: 10rpx;
				.icon-corrow {
					color: #ccc;
				}
			}

			.switch-btn {
				width: 100rpx;
			}
		}

	}

	.lay-btn-item:last-child .content {
		border-bottom: 0 none;

	}

	.btn{
		width: 90%;
		margin: 150rpx auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
		background: linear-gradient(#e96b5c, #ce3c2f);
		color:#fff;
		font-size: 32rpx;
	} 

	.code-bar {
		display: flex;
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 15rpx;
		margin-bottom: 40rpx;

		input {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 10rpx;
			font-size: 30rpx;
		}

		.get-code-btn {
			flex-shrink: 0;
			width: 35%;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			color: #09f;
		}
	}

	.get-code-popup {
		.phone-text {
			margin-bottom: 30rpx;
			color: #666;
		}

		.code-comfirm-btn {
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			background: linear-gradient(#e96b5c, #ce3c2f);
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
